<template>
  <div>
    <el-card>
      <div class="mainbox">
        <div class="leftbox">
          <div class="left1">
            <el-card shadow="never" class="text1">
              当前连接无人机的个数：{{ uavdata.connectednum }}
            </el-card>
            <el-form>
              <el-form-item class="forms">
                <span>当前无人机：</span>
                <el-select v-model="ruleForm.uavId" placeholder="请选择无人机">
                  <el-option
                    label="大疆Mavic2 行业1"
                    value="大疆Mavic2 行业1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="left2">
            <el-amap
              class="amap-box"
              :vid="map"
              :zoom="zoom"
              :center="center"
              :plugin="plugin"
              :events="events"
            >
              <el-amap-marker :position="center" :icon="icon"> </el-amap-marker>
            </el-amap>
          </div>
          <div class="left3">
            <el-card shadow="never" class="text2">
              <!-- 实时经纬度：经度：{{ uavdata.longitude }}，纬度：{{ uavdata.latitude }} -->
              实时经纬度：经度：118.79°E，纬度：31.91°N
            </el-card>
          </div>
        </div>
        <div class="rightbox">
          <div class="right1"></div>

          <div class="right3">
            <el-card class="box-card" shadow="never">
              <div class="info" v-if="uavdata.isFlying == false">
                无人机序列号： {{ uavdata.userId }}
              </div>
              <div class="info" v-if="uavdata.isFlying == false">
                飞行状态： {{ uavdata.notFly }}
              </div>
              <div class="info" v-if="uavdata.isFlying == true">
                飞行状态： {{ uavdata.isFly }}
              </div>
              <div class="info">飞行高度： {{ uavdata.altitude }}m</div>
              <div class="info">飞行时长： {{ uavdata.flyTime }}s</div>
              <div class="info">飞行速度x： {{ uavdata.velocityX }}m/s</div>
              <div class="info">飞行速度y： {{ uavdata.velocityY }}m/s</div>
              <div class="info">飞行速度z： {{ uavdata.velocityZ }}m/s</div>
            </el-card>
          </div>
          <div class="right4">
            <el-button
              type="primary"
              round
              class="text4"
              @click="handleOpenDialog"
              >开启目标检测</el-button
            >
            <el-dialog
              title="目标检测设置"
              center
              :visible.sync="outVisible"
              :before-close="outClose"
              width="25%"
            >
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                "
              >
                <el-form-item label="无人机">
                  <el-select
                    v-model="ruleForm.uavId"
                    placeholder="请选择无人机"
                  >
                    <el-option
                      label="大疆Mavic2 行业版"
                      value="大疆Mavic2 行业版"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="检测间隔时间">
                  <el-select
                    v-model="ruleForm.exeinterval"
                    placeholder="请选择检测间隔时间"
                  >
                    <el-option label="5s" value="5"></el-option>
                    <el-option label="10s" value="10"></el-option>
                    <el-option label="30s" value="30"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')"
                    >提交</el-button
                  >
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { connectWebsocket } from "../utils/websocket";
export default {
  name: "nav-info",
  data() {
    return {
      zoom: 13,
      center: [118.79, 31.91],
      position: [118.79, 31.91],
      icon: require("../assets/无人机.png"), //自定义地图标记点图片
      events: {
        init(o) {
          console.log(o.getCenter());
        },
        zoomchange: (e) => {
          console.log(e);
        },
        zoomend: (e) => {
          //获取当前缩放zoom值
          console.log(this.$refs.map.$$getInstance().getZoom());
          console.log(e);
        },
        click: (e) => {
          alert("map clicked");
        },
      },
      markers: [
        {
          position: [118.79, 31.91],
        },
        {
          position: [118.79, 31.91],
        },
      ],
      //使用其他组件
      plugin: [
        {
          pName: "Scale",
          events: {
            init(instance) {
              console.log(instance);
            },
          },
        },
        {
          pName: "ToolBar",
          events: {
            init(instance) {
              console.log(instance);
            },
          },
        },
      ],
      uavdata: {
        userId: "298CHBKROAOU5P",
        connectednum: 2,
        isFlying: false,
        isFly: "飞行",
        notFly: "停止",
        altitude: 0.0,
        flyTime: 0.0,
        velocityX: 0.0,
        velocityY: 0.0,
        velocityZ: 0.0,
        latitude: -999.0,
        longitude: -999.0,
      },
      fileList: [],
      outVisible: false,
      ruleForm: {
        uavId: "",
        exeinterval: "",
      },
    };
  },
  methods: {
    testWebSocket() {
      connectWebsocket(
        // 测试地址
        "ws://47.100.121.5:7529/api/cloud/1",
        // 传递给后台的数据
        "openexe",
        // { openexe: 'openexe' },
        // 成功拿到后台返回的数据的回调函数
        (data) => {
          console.log("成功的回调函数, 接收到的data数据: ", data);
          this.uavdata = JSON.parse(data);
        },
        // websocket连接失败的回调函数
        (err) => {
          console.log("失败的回调函数", err);
        }
      );
    },
    handleOpenDialog() {
      this.outVisible = true;
    },
    outClose(done) {
      this.$confirm("确认关闭", "提示框")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    handleEdit(row) {
      this.formData = row;
      this.innerVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.mainbox {
  /* background-color: blue; */
  padding: 20px;
  height: 1040px;
}
.leftbox {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  float: left;
  height: 1000px;
  width: 60%;
}
.left1 {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-top: 20px;
  margin-left: 20px;
  height: 100px;
  font-size: 20px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
}
.left2 {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 750px;
}
.left3 {
  margin-left: 20px;
  height: 100px;
  font-size: 20px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
}
.rightbox {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: auto;
  height: 1000px;
}
.right1 {
  margin: 20px 20px 20px 20px;
  height: 100px;
}
.right3 {
  height: 700px;
  width: 65%;
  margin: auto;
}
.right4 {
  width: 20%;
  margin: 30px auto 0 auto;
  height: 100px;
}
.text1 {
  border-color: black;
  width: 25%;
  height: 75%;
  text-align: center;
  font-family: "Microsoft YaHei";
  font-weight: 600;
}
.text2 {
  border-color: black;
  width: 40%;
  text-align: center;
  font-family: "Microsoft YaHei";
  font-weight: 600;
}
.text3 {
  font-size: 20px;
  font-family: "Microsoft YaHei";
  font-weight: 800;
  text-align: center;
}
.text4 {
  font-size: 20px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.info:nth-child(-n + 6) {
  line-height: 100px;
  height: 100px;
  font-size: 30px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  /* margin-bottom: 2px; */
}
.info:nth-child(7) {
  line-height: 100px;
  height: 100px;
  font-size: 30px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  height: 100px;
}
.amap-box {
  border-color: black;
  margin-left: 20px;
  width: 90%;
}
.button {
  margin-left: 68%;
}
.dialogc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.forms {
  margin-right: 20px;
  margin-top: 20px;
}
</style>
